<header class="ui-header">
    <div class="header-btn" i-dom="topbtn" i-tap="toggleEditMode">编辑</div>
</header>

<div class="header-holder"></div>

<div class="ui-box">
    <div class="ui-bar ui-v-a" i-tap="goto(#/addAddress)">
        新增收货地址
        <div class="ui-more"></div>
    </div>
</div>

<div class="ui-box">
    {{each list}}
    <div class="address" data-select="{{select||'false'}}">
        <div class="slider ui-c-f">
            <div class="deleteArea" i-tap="deleteAddress({{$index}})"></div>
            <div class="edit-address" i-tap="editAddress({{$index}})"></div>
            <div class="address-body" i-tap="CheckAndSelectAddress({{$index}})">
                <h1>{{$value.receiver_name}}</h1>

                <h2>{{$value.phone}}</h2>

                <p>{{Pares_address($value.city)}} {{$value.place}}</p>
            </div>


        </div>

    </div>
    {{/each}}
</div>

<div class="ui-page-holder"></div>

<style>
    .header-btn {
        float: right;
        height: 20px;
        line-height: 20px;
        padding: 8px;
        color: white;
        font-size: 14px;
    }

    .header-holder {
        height: 36px;
    }

    .address {
        overflow: hidden;
        height: 90px;
        padding: 0 8px;
        border-bottom: solid 1px #f0f0f0;
        background: transparent;
        transition: background 0.3s;
        -webkit-transition: background 0.3s;
    }

    .address:last-child {
        border-bottom: none;
    }

    .address .slider {
        position: relative;
        right: 0;
        transition: right 0.3s;
        -webkit-transition: right 0.3s;
    }

    .address-body {
        height: 90px;
        float: left;
        width: 80%;
    }

    .deleteArea {
        width: 60px;
        height: 90px;
        text-align: center;
        position: relative;
        float: right;
        right: -68px;
        background: url("img/iconfont-trash.png") red no-repeat center;
        background-size: 32px;
    }

    .address h1 {
        display: inline-block;
        font-size: 16px;
        font-weight: lighter;
        padding: 8px 0;
    }

    .address h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
    }

    .address h2::after {
        content: '';
        display: block;
    }

    .address p {
        font-size: 12px;
        color: #888888;
        max-height: 3.6em;
        line-height: 1.2em;
    }

    .address[data-select="true"]:active {
        background: #f9e043;
        color: white;
    }

    .address[data-select="true"]:active p {
        color: white;
    }

    .address .edit-address {
        width: 60px;
        position: absolute;
        height: 90px;
        right: 0;
        background: url(img/ic_edit.png) no-repeat center;
        background-size: 18px;
    }


</style>